<template>
  <!-- 日志查看 -->
  <div style="padding: 0 15px;">
    <div class="search_and_new">
      <div class="put">
        <el-input v-model="input" placeholder="请输入要查询的用户名/昵称" size="mini" style="width:200px;" />
      </div>
      <div class="serach-btn">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="searchContent">搜索</el-button>
      </div>
    </div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="username" label="用户名" width="180" />
      <el-table-column prop="nickName" label="昵称" width="100" />
      <el-table-column prop="name" label="日志名称" width="180" />
      <el-table-column prop="requestUrl" label="请求路径" />
      <el-table-column prop="requestType" label="请求类别" width="180" />
      <el-table-column prop="ip" label="请求ip" width="180" />
      <el-table-column prop="ipInfo" label="ipinfo" />
      <el-table-column prop="costTime" label="耗时" />
      <el-table-column prop="createTime" label="时间" />
    </el-table>
    <div class="block" align="center" style="padding-top: 20px">
      <el-pagination
        :current-page="currentPage"
        :page-size="10"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 0,
      total: 0,
      input: ''
    }
  },
  mounted() {
    return new Promise((resolve, reject) => {
      // ?pageNumber=1&pageSize=10
      this.$Http
        .getPageData({ pageNumber: 1, pageSize: 10 })
        .then((response) => {
          this.tableData = response.result.content
          this.total = response.result.totalElements
          this.currentPage = response.result.number + 1
        })
        .catch((error) => {
          console.log('err', error)
        })
    })
  },
  methods: {
    handleCurrentChange: function(e) {
      this.$Http
        .getPageData({ pageNumber: e, pageSize: 10, username: this.input })
        .then((response) => {
          this.tableData = response.result.content
          this.total = response.result.totalElements
          this.currentPage = response.result.number + 1
        })
        .catch((error) => {
          console.log('err', error)
        })
    },
    searchContent: function() {
      this.$Http
        .getPageData({ pageNumber: 1, pageSize: 10, username: this.input })
        .then((response) => {
          this.tableData = response.result.content
          this.total = response.result.totalElements
          this.currentPage = 1
        })
        .catch((error) => {
          console.log('err', error)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.search_and_new {
  height: 5vh;
  margin-top: 20px;
}
.search_and_new > div {
  display: inline-block;
  margin-right: 15px;
}
</style>
